<template>
    <div class="video-player-page" v-if="video && !loading">
        <!-- 导航栏 -->
        <div class="navbar">
            <a @click="goBack" class="navbar-back">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div class="navbar-title">视频播放</div>
            <div>
                <i class="fas fa-ellipsis-v"></i>
            </div>
        </div>

        <!-- 视频播放器 -->
        <div class="video-container">
            <video ref="videoPlayer" class="video-player" :src="video.videoUrl" :poster="video.coverImage"></video>
            <div class="play-center" v-if="!isPlaying" @click="togglePlay">
                <i class="fas fa-play"></i>
            </div>
            <div class="video-controls" :class="{ 'hide-controls': hideControls }">
                <div class="play-button" @click="togglePlay">
                    <i :class="['fas', isPlaying ? 'fa-pause' : 'fa-play']"></i>
                </div>
                <div class="time-display">{{ formatTime(currentTime) }}</div>
                <div class="progress-bar" @click="seek" ref="progressBar">
                    <div class="progress-filled" :style="{ width: progress + '%' }"></div>
                </div>
                <div class="time-display">{{ formatTime(duration) }}</div>
                <div class="fullscreen-button" @click="toggleFullscreen">
                    <i class="fas fa-expand"></i>
                </div>
            </div>
        </div>

        <!-- 作者信息 -->
        <div class="author-section" v-if="author">
            <img class="author-avatar" :src="author.avatar || ''" alt="用户头像">
            <div class="author-info">
                <div class="author-name">{{ author.username }}</div>
                <!-- Note: followers count is not in the user table based on schema -->
            </div>
        </div>

        <!-- 视频信息 -->
        <div class="info-section">
            <h1 class="video-title">{{ video.title }}</h1>
            <div class="video-stats">
                <div class="stats-left">
                    <div class="stat-item"><i class="fas fa-eye stat-icon"></i> <span>{{ video.views }}次观看</span></div>
                    <div class="stat-item"><i class="fas fa-calendar-alt stat-icon"></i> <span>{{ video.createdAt
                            }}</span></div>
                </div>
                <div><i class="fas fa-share-alt"></i></div>
            </div>
            <div class="action-buttons">
                <div @click="likeVideo" class="action-button" :class="{ 'liked': isLiked }"><i
                        class="fas fa-thumbs-up action-icon"></i> <span class="action-text">{{ video.likes }}</span>
                </div>
                <div @click="commentVideo" class="action-button"><i class="fas fa-comment-alt action-icon"></i> <span
                        class="action-text">评论</span></div>
                <div @click="shareVideo" class="action-button"><i class="fas fa-share action-icon"></i> <span
                        class="action-text">分享</span></div>
                <div @click="bookmarkVideo" class="action-button" :class="{ 'liked': isFavorited }"><i class="fas fa-bookmark action-icon"></i> <span
                        class="action-text">{{ isFavorited ? '已收藏' : '收藏' }}</span></div>
            </div>
        </div>

        <!-- 视频简介 -->
        <div class="description" v-html="video.description"></div>

        <!-- 相关商品 -->
        <div class="product-section" v-if="products && products.length > 0">
            <div class="section-title"><i class="fas fa-shopping-bag section-icon"></i> <span>视频相关商品</span></div>
            <router-link :to="{ name: 'ProductDetail', params: { id: product.productId } }" class="product-card"
                v-for="product in products" :key="product.productId">
                <img class="product-image" :src="product.mainImage" :alt="product.name">
                <div class="product-info">
                    <div class="product-name">{{ product.name }}</div>
                    <div class="product-price">¥{{ product.price }}</div>
                    <div class="buy-button">立即购买</div>
                </div>
            </router-link>
        </div>

        <!-- 评论区 placeholder -->
        <div class="comments-section" @click="commentVideo">
            <div class="comments-header">
                <div class="comments-title">评论 ({{ commentsWithUsers.length }})</div>
                <div class="sort-button"><span>查看全部</span> <i class="fas fa-chevron-right sort-icon"></i></div>
            </div>
            <div class="comment-card" v-if="commentsWithUsers.length > 0">
                <div class="comment-header" v-if="commentsWithUsers[0].user">
                    <img class="comment-avatar" :src="commentsWithUsers[0].user.avatar || ''" alt="评论头像">
                    <div class="comment-user-info">
                        <div class="comment-username">{{ commentsWithUsers[0].user.username }}</div>
                    </div>
                </div>
                <div class="comment-content">{{ commentsWithUsers[0].content }}</div>
            </div>
            <div v-else class="no-comment">
                暂无评论，快来抢沙发吧！
            </div>
        </div>

        <!-- 相关推荐 -->
        <div class="related-videos-section">
            <div class="related-title">相关推荐</div>
            <router-link :to="{ name: 'videoPlayer', params: { id: related.videoId } }" class="related-video-card"
                v-for="related in relatedVideosData" :key="related.videoId">
                <div class="related-video-thumbnail">
                    <img :src="related.coverImage" alt="相关视频">
                    <div class="related-video-duration">{{ formatTime(related.duration) }}</div>
                </div>
                <div class="related-video-info">
                    <div class="related-video-title">{{ related.title }}</div>
                    <div class="related-video-meta">
                        <div>{{ related.authorId }}</div>
                        <div>{{ related.views }}次观看</div>
                    </div>
                </div>
            </router-link>
        </div>
    </div>
    <div v-else-if="error" class="error-container">
        {{ error }}
    </div>
    <div v-else class="loading-container">
        <div class="loading-spinner">
            <i class="fas fa-spinner fa-spin"></i>
            <span>加载中...</span>
        </div>
    </div>

    <van-popup v-model:show="showCommentPopup" position="bottom"
        :style="{ height: '70%', display: 'flex', 'flex-direction': 'column' }">
        <div class="popup-comments-section">
            <div class="popup-comments-header">
                <div class="popup-comments-title">评论 ({{ commentsWithUsers.length }})</div>
                <div @click="showCommentPopup = false" class="popup-close-button">&times;</div>
            </div>
            <div class="comment-list">
                <div class="comment-card" v-for="comment in commentsWithUsers" :key="comment.commentId">
                    <div class="comment-header" v-if="comment.user">
                        <img class="comment-avatar" :src="comment.user.avatar || ''" alt="评论头像">
                        <div class="comment-user-info">
                            <div class="comment-username">{{ comment.user.username }}</div>
                            <div class="comment-date">{{ comment.createdAt }}</div>
                        </div>
                    </div>
                    <div class="comment-content">{{ comment.content }}</div>
                </div>
                <div v-if="commentsWithUsers.length === 0" class="no-comment-popup">
                    暂无评论，快来抢沙发吧！
                </div>
            </div>
            <div class="comment-input-area">
                <input class="comment-input" type="text" v-model="newComment" placeholder="发表你的评论..."
                    @keyup.enter="postComment">
                <button class="comment-send-button" @click="postComment">发送</button>
            </div>
        </div>
    </van-popup>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import api from '@/network/api';
import { showToast } from 'vant';

const route = useRoute();
const router = useRouter();
const videoId = ref(Number(route.params.id));

// Data refs
const video = ref(null);
const author = ref(null);
const products = ref([]);
const commentsWithUsers = ref([]);
const relatedVideosData = ref([]);

// State refs
const loading = ref(true);
const error = ref(null);
const isLiked = ref(false);
const showCommentPopup = ref(false);
const newComment = ref('');
const isFavorited = ref(false);

// Player refs
const videoPlayer = ref(null);
const isPlaying = ref(false);
const progress = ref(0);
const currentTime = ref(0);
const duration = ref(0);
const hideControls = ref(false);
let controlsTimeout = null;
const isLogin = ref(false);

const goBack = () => {
    router.back();
}

const fetchComments = async () => {
    try {
        const commentsRes = await api.getVideoComments(videoId.value);
        const commentsData = commentsRes.data.data || [];
        if (commentsData.length > 0) {
            const userIds = [...new Set(commentsData.map(c => c.userId))];
            const userProfiles = await Promise.all(userIds.map(id => api.getUserProfile(id).then(res => res.data.data)));
            const usersMap = new Map(userProfiles.map(u => [u.userId, u]));
            commentsWithUsers.value = commentsData.map(comment => ({
                ...comment,
                user: usersMap.get(comment.userId)
            })).sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
        } else {
            commentsWithUsers.value = [];
        }
    } catch (err) {
        console.error('Failed to fetch comments:', err);
        showToast('评论加载失败');
    }
};

// Main data fetching function
const fetchVideoData = async () => {
    loading.value = true;
    error.value = null;
    try {
        // 1. Fetch main video details
        const videoRes = await api.getVideoDetail(videoId.value);
        video.value = videoRes.data.data;
        if (!video.value) {
            throw new Error('Video not found');
        }

        const userId = video.value.authorId;

        // 2. Fetch related data in parallel
        const promises = [
            api.getUserProfile(userId),
            fetchComments(),
            api.getRecommendedVideos(videoId.value),
            api.getProductsByVideoId(videoId.value)
        ];

        const [
            authorRes,
            , // comments fetched by fetchComments
            relatedVideosRes,
            productsRes
        ] = await Promise.all(promises);

        author.value = authorRes.data.data;

        // 4. Process related videos to include author data
        const recommended = relatedVideosRes.data.data || [];
        if (video.value && video.value.categoryId) {
            relatedVideosData.value = recommended.filter(
                (v) => v.categoryId === video.value.categoryId && v.videoId !== videoId.value
            );
        } else {
            relatedVideosData.value = recommended.filter((v) => v.videoId !== videoId.value);
        }
        products.value = productsRes.data.data || [];

    } catch (err) {
        console.error('Failed to fetch video data:', err);
        error.value = '视频加载失败，请稍后重试。';
        isLiked.value = false;
    } finally {
        loading.value = false;
    }
};

const setupVideoPlayer = () => {
    const player = videoPlayer.value;
    if (!player) return;

    player.addEventListener('play', () => isPlaying.value = true);
    player.addEventListener('pause', () => isPlaying.value = false);
    player.addEventListener('loadedmetadata', () => duration.value = player.duration);
    player.addEventListener('timeupdate', () => {
        currentTime.value = player.currentTime;
        progress.value = (player.currentTime / player.duration) * 100;
    });

    const videoContainer = player.parentElement;
    videoContainer.addEventListener('mousemove', showControls);
    videoContainer.addEventListener('click', (e) => {
        if (e.target === videoContainer || e.target === player) {
            togglePlay();
        }
    });
};

const togglePlay = () => {
    const player = videoPlayer.value;
    if (player.paused) {
        player.play();
    } else {
        player.pause();
    }
};

const formatTime = (seconds) => {
    if (isNaN(seconds)) return '00:00';
    const date = new Date(seconds * 1000);
    const hh = date.getUTCHours();
    const mm = date.getUTCMinutes();
    const ss = date.getUTCSeconds().toString().padStart(2, '0');
    if (hh) {
        return `${hh}:${mm.toString().padStart(2, '0')}:${ss}`;
    }
    return `${mm}:${ss}`;
};

const seek = (event) => {
    const progressBar = event.currentTarget;
    const clickPosition = event.offsetX / progressBar.offsetWidth;
    videoPlayer.value.currentTime = clickPosition * duration.value;
};

const toggleFullscreen = () => {
    const player = videoPlayer.value;
    if (!document.fullscreenElement) {
        player.requestFullscreen().catch(err => {
            alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
        });
    } else {
        document.exitFullscreen();
    }
};

const showControls = () => {
    hideControls.value = false;
    clearTimeout(controlsTimeout);
    if (isPlaying.value) {
        controlsTimeout = setTimeout(() => {
            hideControls.value = true;
        }, 3000);
    }
};

const addViewer = () => {
    api.addViewer(videoId.value);
}

const checkLike = () => {
    api.checkLike(videoId.value)
        .then(res => {
            isLiked.value = res.data != null;
        })
        .catch(error => {
            console.error('Failed to check like:', error);
            isLiked.value = false; // Assume not liked if check fails
        });
}

const likeVideo = () => {
    if (!isLogin.value) {
        showToast('请先登录');
        return;
    }
    if (isLiked.value) {
        dislikeVideo();
    } else {
        api.likeVideo(videoId.value)
            .then(() => {
                showToast('点赞成功');
                video.value.likes++;
                isLiked.value = true;
            })
            .catch(err => {
                console.error('Failed to like video:', err);
                // The interceptor already shows a dialog on 401, so no extra toast is needed for that case.
            });
    }
}

const dislikeVideo = () => {
    if (!isLogin.value) {
        showToast('请先登录');
        return;
    }
    api.dislikeVideo(videoId.value)
        .then(() => {
            showToast('取消点赞');
            video.value.likes--;
            isLiked.value = false;
        })
        .catch(err => {
            console.error('Failed to dislike video:', err);
            // The interceptor already shows a dialog on 401.
        });
}

const commentVideo = () => {
    showCommentPopup.value = true;
}

const postComment = async () => {
    if (!isLogin.value) {
        showToast('请先登录');
        return;
    }
    if (!newComment.value.trim()) {
        showToast('评论内容不能为空');
        return;
    }
    try {
        await api.addVideoComment(video.value.videoId, newComment.value);
        showToast('评论成功');
        newComment.value = '';
        await fetchComments();
    } catch (error) {
        console.error('Failed to post comment:', error);
        // Interceptor will show dialog.
    }
};

const shareVideo = () => {
    console.log('shareVideo');
}

const bookmarkVideo = () => {
    if (!isLogin.value) {
        showToast('请先登录');
        return;
    }
    if (isFavorited.value) {
        unbookmarkVideo();
    } else {
        api.addFavorite('video', videoId.value).then(res => {
            showToast('收藏成功');
            isFavorited.value = true;
            
        }).catch(err => {
            console.error('Failed to bookmark video:', err);
        });
    }
}

const checkFavorite = () => {
    api.checkFavorite('video', videoId.value)
        .then(res => {
            isFavorited.value = res.data != null;
        });
}

const unbookmarkVideo = () => {
    api.removeFavorite('video', videoId.value).then(res => {
        showToast('取消收藏');
        isFavorited.value = false;
    });
}

const initializePage = async () => {
    // `fetchVideoData` will set loading to true, which hides the main content
    await fetchVideoData();
    // If there's an error, we shouldn't proceed
    if (error.value) return;
    try {
        await api.checkLoginNoIntercept()
            .then(res => {
                if (res.code === 100) {
                    checkLike();
                    checkFavorite();
                    isLogin.value = true;
                }
            });
    } catch (error) {
        console.error('Failed to check login:', error);
    }
    addViewer();

    // Wait for the DOM to update after fetching data
    await nextTick();
    if (video.value) {
        setupVideoPlayer();
    }
};

watch(() => route.params.id, async (newId) => {
    if (newId && Number(newId) !== videoId.value) {
        // Reset state when navigating to a new video
        videoId.value = Number(newId);
        video.value = null;
        author.value = null;
        products.value = [];
        commentsWithUsers.value = [];
        relatedVideosData.value = [];
        isLiked.value = false;
        isPlaying.value = false;
        progress.value = 0;
        currentTime.value = 0;
        duration.value = 0;
        showCommentPopup.value = false; // Close comment popup

        await initializePage();
    }
});

onMounted(async () => {
    await initializePage();
});

onUnmounted(() => {
    clearTimeout(controlsTimeout);
    // Event listeners are automatically removed when the component is unmounted
});
</script>


<style scoped>
/* Base Styles from video-player.html */
body {
    background-color: #000;
    color: #fff;
}

.video-player-page {
    background-color: #000;
    padding-bottom: 20px;
    min-height: 100vh;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #121212;
    color: white;
}

.navbar-back {
    color: white;
    cursor: pointer;
}

.navbar-title {
    font-size: 18px;
    font-weight: 500;
}

.video-container {
    position: relative;
    width: 100%;
    background-color: #000;
    margin-top: 50px;
    /* Adjust for fixed navbar */
}

.video-player {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background-color: #000;
    position: relative;
}

.video-poster {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    padding: 30px 15px 15px;
    display: flex;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.video-controls.hide-controls {
    opacity: 0;
}

.play-button {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    cursor: pointer;
    color: white;
}

.progress-bar {
    flex: 1;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    position: relative;
    margin: 0 10px;
    cursor: pointer;
}

.progress-filled {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #3490dc;
    border-radius: 3px;
}

.time-display {
    color: white;
    font-size: 12px;
}

.fullscreen-button {
    margin-left: 10px;
    color: white;
    cursor: pointer;
}

.play-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: white;
    font-size: 24px;
}

.info-section {
    background-color: #121212;
    padding: 15px;
    border-bottom: 1px solid #333;
}

.video-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #fff;
}

.video-stats {
    display: flex;
    justify-content: space-between;
    color: #aaa;
    font-size: 14px;
    margin-bottom: 15px;
}

.stats-left {
    display: flex;
}

.stat-item {
    margin-right: 15px;
    display: flex;
    align-items: center;
}

.stat-icon {
    margin-right: 5px;
}

.action-buttons {
    display: flex;
    border-top: 1px solid #333;
    padding-top: 15px;
}

.action-button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #aaa;
}

.action-icon {
    font-size: 20px;
    margin-bottom: 5px;
}

.action-text {
    font-size: 12px;
}

.action-button.liked {
    color: #3490dc;
}

.author-section {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: #121212;
    border-bottom: 1px solid #333;
    color: #fff;
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.author-info {
    flex: 1;
    align-items: center;
}

.author-name {
    font-weight: 500;
    margin-bottom: 3px;
}

.author-followers {
    font-size: 12px;
    color: #aaa;
}

.follow-button {
    background-color: #3490dc;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

.description {
    padding: 15px;
    background-color: #121212;
    font-size: 14px;
    color: #ccc;
    line-height: 1.5;
    border-bottom: 1px solid #333;
}

.product-section {
    background-color: #121212;
    padding: 15px;
    border-bottom: 1px solid #333;
}

.section-title {
    font-weight: 500;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    color: #fff;
}

.section-icon {
    margin-right: 5px;
    color: #3490dc;
}

.product-card {
    display: flex;
    background-color: #1a1a1a;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    text-decoration: none;
    color: inherit;
}

.product-image {
    width: 70px;
    height: 70px;
    border-radius: 5px;
    object-fit: cover;
    margin-right: 10px;
}

.product-info {
    flex: 1;
}

.product-name {
    font-weight: 500;
    margin-bottom: 5px;
    font-size: 14px;
    color: #fff;
}

.product-price {
    color: #e53e3e;
    font-weight: bold;
    margin-bottom: 8px;
}

.buy-button {
    display: inline-block;
    background-color: #3490dc;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
}

.comments-section {
    padding: 15px;
    background-color: #121212;
    color: #fff;
    border-bottom: 1px solid #333;
    cursor: pointer;
}

.comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.comments-title {
    font-weight: 500;
}

.sort-button {
    display: flex;
    align-items: center;
    color: #aaa;
    font-size: 12px;
}

.sort-icon {
    margin-left: 5px;
}

.comment-card {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #333;
}

.comment-card:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.comment-header {
    display: flex;
    margin-bottom: 8px;
    align-items: center;
}

.comment-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.comment-user-info {
    flex: 1;
}

.comment-username {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 3px;
}

.comment-date {
    font-size: 12px;
    color: #aaa;
}

.comment-content {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 5px;
    padding-left: 40px;
}

.comment-actions {
    display: flex;
    padding-left: 40px;
}

.comment-action {
    display: flex;
    align-items: center;
    color: #aaa;
    font-size: 12px;
    margin-right: 15px;
}

.comment-action-icon {
    margin-right: 5px;
}

.related-videos-section {
    padding: 15px;
    background-color: #121212;
    color: #fff;
}

.related-title {
    font-weight: 500;
    margin-bottom: 15px;
}

.related-video-card {
    display: flex;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #333;
    text-decoration: none;
    color: inherit;
}

.related-video-card:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.related-video-thumbnail {
    position: relative;
    width: 120px;
    height: 68px;
    margin-right: 10px;
    flex-shrink: 0;
}

.related-video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.related-video-duration {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 10px;
}

.related-video-info {
    flex: 1;
}

.related-video-title {
    font-size: 14px;
    margin-bottom: 5px;
    line-height: 1.3;
    max-height: 36px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #fff;
}

.related-video-meta {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #aaa;
}

.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #121212;
    color: #fff;
}

.error-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #121212;
    color: #ff6b6b;
    text-align: center;
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loading-spinner i {
    font-size: 24px;
    color: #3490dc;
    margin-bottom: 10px;
}

/* Popup Comment Styles */
.popup-comments-section {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #1a1a1a;
    color: #fff;
}

.popup-comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
}

.popup-comments-title {
    font-weight: 500;
}

.popup-close-button {
    font-size: 24px;
    cursor: pointer;
    color: #aaa;
}

.comment-list {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.no-comment-popup {
    text-align: center;
    color: #aaa;
    margin-top: 50px;
}

.comment-input-area {
    display: flex;
    padding: 10px;
    border-top: 1px solid #333;
    background-color: #121212;
    flex-shrink: 0;
}

.comment-input {
    flex: 1;
    background-color: #333;
    border: 1px solid #444;
    border-radius: 20px;
    padding: 8px 15px;
    color: #fff;
    margin-right: 10px;
}

.comment-input::placeholder {
    color: #888;
}

.comment-send-button {
    background-color: #3490dc;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
}
</style>